<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新增工作检修</block>
		</cu-custom>
		<view class="addContainer bg-top bg-blue">
			
			<view class="contentContainer">
				<view class="chargeCon boxWatch flexCenter">
					<view class="conTitle">
						流程模板
					</view>
					<view  style="color: #2979ff;font-weight: 600;" class="nameInput">
						{{tempTitle}}
					</view>
				</view>
				
				<view class="missionContanier boxWatch flexCenter">
					<view class="conTitle">任务名称</view>
					<input type="text" v-model="addRecondition.TaskName" placeholder="请输入任务名称"/>
				</view>
				
				<view class="textContanier boxWatch">
					<view class="workTitle conTitle">工作内容</view>
					<view class="textCon">
						<u-input
							type="textarea"
							v-model="addRecondition.TaskContent"
							:clearable="false"
							:auto-height="false"
							:border="false"
							height="300"
							:maxlength="textAreaMaxLength"
							placeholder="请输入工作内容"
						>
						</u-input>
					</view>
				</view>
				
				<view class="startTimeContanier boxWatch flexCenter">
					<view class="conTitle">开始时间</view>
					<picker mode="date" @change="confirmStartTime" :params="params">
						<view class="uni-input">{{showStartTime}}</view>
					</picker>
					<!-- <u-input placeholder="请选择时间" v-model="startTimeShow" @click='showStartTime = true' :disabled="true"/> -->
				</view>
				<view class="endTimeContanier boxWatch flexCenter">
					<view class="conTitle">结束时间</view>
					<picker  mode="date" @change="confirmEndTime" :params="params">
						<view class="uni-input">{{showEndTime}}</view>
					</picker>
					<!-- <u-input placeholder="请选择时间" v-model="endTimeShow" @click='showEndTime = true' :disabled="true"/> -->
				</view>
				
				<view class="bottomContain boxWatch flexCenter">
					<view class="conTitle">任务列表</view>
					<view @click="showJoinWorkList()" class="rapid">{{selectJoinWork.id?selectJoinWork.name:'点击选择'}}</view>
					<pickerSearch v-model="qrcodeSeleceShow" :dataSource='JoinWorkList' :pickerValues="[0]" @recload='confirmQrcode'></pickerSearch>
				</view>
						
				<view class="publish-goods-wrap">
					<view class="publish-goods-btn" @click="submit">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request.js"
	import pickerSearch from "@/components/picker-search/pickerSearch.vue";
	export default {
		components:{
			pickerSearch
		},
		data() {
			return {
				ReconditionEntity:{},
				ReconditionList:[],
				tempId:'',
				tempTitle:'',
				choosedPersonList:[],
				choosedPersonName:'',
				textAreaMaxLength: 300,
				show: false,
				showStartTime: '请选择时间',
				showEndTime: '请选择时间',
				
				startTimestamp:'',
				endTimestamp: '',
				
				addRecondition: {
					WorkHead:'',
					TaskContent:'',
					StartTime:'',
					EndTime:'',
					MustTakenAQCS:'',
					OtwoHLJC:'',
					WorkHeadID:'',
					TaskName: '',
				},

				startTimeShow: '',
				endTimeShow:'',
				
				list: [],
				
				params:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				
				Data:{},
				JoinWorkList: [
					{
						id: '',
						name: '点击选择'
					}
				],
				qrcodeSeleceShow: false,
				selectJoinWork: {}
			}
		},
		onShow() {
			let that=this
			uni.$on('returnData',function(data){
				that.choosedPersonList=data.data
				//choosedPersonName
				if(that.choosedPersonList.length>0){
					that.addRecondition.WorkHead=''
					let WorkHeadArry=[]
					let WorkHeadIDArry=[]
					for(let i=0;i<that.choosedPersonList.length;i++){
						let entity=that.choosedPersonList[i]
						WorkHeadArry.push(entity.RealName)
						WorkHeadIDArry.push(entity.Id)
					}
					that.addRecondition.WorkHead=WorkHeadArry.join()
					that.addRecondition.WorkHeadID=WorkHeadIDArry.join()
				}
			})
		},	
		onLoad(options){
			this.tempId=options.tempId
			this.addRecondition.tempId=options.tempId
			this.tempTitle=options.tempTitle
			this.WorkHeadList()
			this.getDetail(options.tempId);
			this.getJoinWorkList()
		},
		methods: {
			showJoinWorkList(){
				let that = this
				that.qrcodeSeleceShow = true
			},
			confirmQrcode(data){
				let that = this
				console.log("datadatadatadata", data)
				that.selectJoinWork.id=data.id
				that.selectJoinWork.name=data.name
			},
			WorkHeadList(){
				let opts = {
					url: 'CofcoApi/GetJSUserList',
					method: 'get'
				}
				request.httpTokenRequest(opts).then(res=>{
					if (res.data.code === 1) {
						let userlist = res.data.data.Data
						
						if (userlist.length > 0) {
							for(let i = 0;i<userlist.length;i++) {
								let userObj = {value: userlist[i].Id,label:userlist[i].RealName}
								this.list.push(userObj)
							}
						}
					}
				})
			},
			getDetail(id){
				let that=this
				let opts = {
					url: 'WorkflowApi/GetWork',
					method: 'get'
				};
				let data = {
					id:id
				}
				uni.showLoading({
					title:'加载中...'
				})
				request.httpTokenRequest(opts,data).then(res=>{
					uni.hideLoading();
					that.Data = res.data.Data
					
					that.addRecondition.TaskName = res.data.Data.TaskName
					that.startTimeShow = res.data.Data.StartTime
					that.addRecondition.StartTime = res.data.Data.StartTime
					that.endTimeShow = res.data.Data.EndTime
					that.addRecondition.EndTime = res.data.Data.EndTime
					that.addRecondition.TaskContent = res.data.Data.TaskContent
			
					// if (res.data.code === 1) {
					// 	let data = res.data.data
					// 	that.ReconditionEntity=data.Entity
					// 	that.ReconditionList=data.list
					// }else{
					// 	uni.showToast({ title: res.data.msg, icon: 'none' });
					// }
				})
			},
			getJoinWorkList(){
				let that = this
				let opts = {
					url: 'WorkflowApi/GetJoinWorkList',
					method: 'get'
				}
				let param = {
					pageindex: '1',
					pagesize: '10',
					KeyWords: ''
				}
				request.httpTokenRequest(opts, param).then(res => {
					console.log('getJoinWorkList', res)
					let Data = res.data.Data
					// that.JoinWorkList = Data
					for (let i = 0; i < Data.length; i++) {
						let listObj = {}
						listObj.id = Data[i].Id
						listObj.name = Data[i].TaskName
						that.JoinWorkList.push(listObj)
					}
				})
			},
			submit() {
				if(!this.addRecondition.TaskName){
					uni.showToast({ title: '请填写任务名称', icon: 'none' });
					return;
				}
				if(!this.addRecondition.TaskContent){
					uni.showToast({ title: '请填写工作内容', icon: 'none' });
					return;
				}
				if(!this.addRecondition.StartTime){
					uni.showToast({ title: '请选择开始时间', icon: 'none' });
					return;
				}
				if(!this.addRecondition.EndTime){
					uni.showToast({ title: '请选择结束时间', icon: 'none' });
					return;
				}
				let opts = {
					// url: 'CofcoApi/AddETWorkOverhaulNew',
					url: 'WorkflowApi/SaveWork',
					method: 'POST'
				};
				//准备提交
				uni.showLoading({
					title:'提交中...'
				})
				
				if(this.tempId==null||this.tempId==""){
					uni.showToast({ title: '请选择模板', icon: 'none' });
					return;
				}
				
				this.Data.StartTime = this.addRecondition.StartTime
				this.Data.EndTime = this.addRecondition.EndTime
				this.Data.TaskName = this.addRecondition.TaskName
				this.Data.TaskContent = this.addRecondition.TaskContent
				
				this.Data.JoinID = this.selectJoinWork.id || ''
				
				request.httpTokenRequest(opts,this.Data).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '提交成功', icon: 'none',duration:2000 });
						setTimeout(() => {
							 uni.navigateBack({
							 	delta: 2 //返回层数，2则上上页
							 });
						}, 1000)
						
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			confirmStartTime(startTime) {
				// timestamp 时间戳 day: "08" hour: "11" minute: "03" month: "04" year: "2023"
				const {year, month, day, hour, minute, timestamp, detail} = startTime
				
				this.startTimestamp = timestamp
				
				console.log('startTime', startTime)
				
				if (this.endTimeShow) {
					if (new Date(this.endTimeShow) >= new Date(detail.value)) {
						// this.startTimeShow = year + '-' + month + '-' + day +'  ' + hour + ':' + minute
						this.addRecondition.StartTime = detail.value
						this.startTimeShow = detail.value
						this.showStartTime = detail.value
					} else {
						uni.showToast({ title: '开始时间须需小于结束时间', icon: 'none',duration:3000 });
					}
				} else {
					// this.startTimeShow = year + '-' + month + '-' + day +'  ' + hour + ':' + minute
					this.addRecondition.StartTime = detail.value
					this.startTimeShow = detail.value
					this.showStartTime = detail.value
				}
			},
			confirmEndTime(endTime) {
				// timestamp 时间戳 day: "08" hour: "11" minute: "03" month: "04" year: "2023"
				const {year, month, day, hour, minute, timestamp, detail} = endTime
				this.endTimestamp = timestamp
				if(this.startTimeShow) {
					if (new Date(detail.value) >= new Date(this.startTimeShow)) {
						// this.endTimeShow = year + '-' + month + '-' + day +'  ' + hour + ':' + minute
						this.addRecondition.EndTime = detail.value
						this.endTimeShow = detail.value
						this.showEndTime = detail.value
					} else {
						uni.showToast({ title: '结束时间需大于开始时间', icon: 'none',duration:3000 });
					}
				} else {
					// this.endTimeShow = year + '-' + month + '-' + day +'  ' + hour + ':' + minute
					this.addRecondition.EndTime = detail.value
					this.endTimeShow = detail.value
					this.showEndTime = detail.value
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.addContainer {
			color: #000;
			&.bg-top{
				margin-top: -1rpx;
				width: 750rpx;
				height: 220rpx;
				padding-top: 30rpx;
				border-radius: 0 0 20% 20%;
			}
			
			.boxWatch{
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
				width: 90%;
				margin: 0 auto 20rpx;
			}
			.flexCenter {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.bottomContain{
				.rapid{
					flex: 1;
					text-align: right;
				}
			}
			.titleHeader {
				font-weight: 700;
				font-size: 34rpx;
			}
			.conTitle {
				font-weight: 700;
				font-size: 30rpx;
			}
			.contentContainer {
				padding-bottom: 30rpx;
				
				.chargeCon {
					.nameInput{
						display: flex;
						align-items: center;
					}
				}
				
				.joinContainer {
					
					.btnCon {
						display: flex;
						justify-content: space-evenly;
						
						.margin10rpx {
							margin: 0 10rpx;
						}
					}
				}
				.textContanier{
					.workTitle {
						margin-bottom: 15rpx;
					}
					.textCon {
						position: relative;
						border: 1rpx solid #dcdfe6;
						padding:10rpx 20rpx;
						border-radius: 16rpx;
						.wordsTip {
							position: absolute;
							right: 0;
							bottom: 0;
							color: #ccc;
							font-size: 24rpx;
						}
					}
				}
				
				.mustTakenContainer {
					.conTitle {
						margin-bottom: 20rpx;
						padding-bottom: 10rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
					}
				}
				.OtwoContainer {
					.conTitle {
						margin-bottom: 20rpx;
						padding-bottom: 10rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
					}
				}
				.replenCon{
					.workTitle {
						margin-bottom: 15rpx;
					}
					.textCon {
						position: relative;
						border: 1rpx solid #dcdfe6;
						padding: 0 0 40rpx 10rpx;
						border-radius: 16rpx;
						.wordsTip {
							position: absolute;
							right: 0;
							bottom: 0;
							color: #ccc;
							font-size: 24rpx;
						}
					}
				}
				
				.subBtn{
					width: 90%;
					margin: 0 auto;
					
				}
			}
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	
	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
	
</style>